import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
Vue.use(VueRouter)

const Home = () => import('@pag/Home')
const Login = () => import('@pag/Login')
const Search = () => import('@pag/Search')
const Register = () => import('@pag/Register')
const Detail = () => import('@pag/Detail')
const AddCartSuccess = () => import('@pag/AddCartSuccess')
const ShopCart = () => import('@pag/ShopCart')
const PaySuccess = () => import('@pag/PaySuccess')
const Pay = () => import('@pag/Pay')
const Center = () => import('@pag/Center')
const Trade = () => import('@pag/Trade')
const MyOrder = () => import('@pag/Center/MyOrder')
const TeamOrder = () => import('@pag/Center/TeamOrder')

// 重写路由器push的方法
// 1.先获取原始的push方法，供自定义push使用
const lastPush = VueRouter.prototype.push;

/* 
重写push的原因：
push方法返回promise实例，但是我们如果不传第三个参数onAbort,push内部的catch函数没有处理异常的回调函数，所以push出错，就会直接抛出错误到浏览器上
*/
// 2.重写push 覆盖之前的push方法 我们的push方法默认传入onComplate和onAbort参数默认为一个函数，如果push出现问题后，就会由catch进行异常处理，这个就是重写push的核心

VueRouter.prototype.push = function(
    location,
    onComplate=()=>{},
    onAbort = ()=>{}
){
    /* 
    之前的push在VueRouter的原型对象上放，所以原本的push中的this就是指向VueRouter的实例，但是现在的lastPush被直接默认调用，所以this就指向了undefined，内部很可能出错，所以我们在调用lastPush的时候，可以改变他的this指向VueRouter的实例
    */
    return lastPush.call(this,location,onComplate,onAbort)
}



const router =  new VueRouter ({
    scrollBehavior(){
        return{
            x:0,
            y:0
        }
    },
    mode:'history',
    routes:[
        {
            path:'/home',
            component:Home,
            name:'home'
        },
        {
            path:'/login',
            component:Login,
            name:'login',
            meta:{
                footerIsShow:true
            },
        },
        {
            path:'/search/:keyword?',
            component:Search,
            name:'search',
        },
        {
            path:'/register',
            component:Register,
            name:'register',
            meta:{
                footerIsShow:true
            },
        },
        {
            path:'/detail/:skuId',
            component:Detail,
            name:'detail',
        },
        {
            path:'/paysuccess',
            component:PaySuccess,
            name:'paysuccess',
            beforeEnter(to,from,next){
                if(from.path.startsWith('/pay')){
                    next()
                }else{
                    next('/shopcart')
                }
            }
        },
        {
            path:'/pay',
            component:Pay,
            name:'pay',
            beforeEnter(to,from,next){
                if(from.path.startsWith('/trade')){
                    next()
                }else{
                    next('/shopcart')
                }
            }
        },
        {
            path:'/center',
            component:Center,
            children:[
                {
                    path:'myorder',
                    component:MyOrder,
                    name:'myorder'
                },
                {
                    path:'teamorder',
                    component:TeamOrder,
                    name:'teamorder'
                },
                {
                    path:'',
                    component:MyOrder
                }
            ]
        },
        {
            path:'/trade',
            component:Trade,
            name:'trade',

            beforeEnter(to,from,next){
                if(from.path.startsWith('/shopcart')){
                    next()
                }else{
                    next('/shopcart')
                }
            }
        },
        {
            path:'/addcartsuccess',
            component:AddCartSuccess,
            name:'addcartsuccess',
            
            beforeEnter(to,from,next){
                if(sessionStorage.getItem('addcartInfo')){
                    next()
                }else{
                    next('/shopcart')
                }
            }
        },
         {
            path:'/shopcart',
            component:ShopCart,
            name:'shopcart',
        },
        {
            path:'/',
            component:Home,
           
        },
    ]
})

// token校验逻辑：判断用户名是否存在 用户名存在则用户一定进行登录了 如果没有用户名则没有登录 要去登录页面登录

router.beforeEach( async (to,from,next)=>{

    const checkPath = ['/center','/pay','/paysuccess','/trade']

    const isCheckPath = checkPath.some(item=>{
        // 判断to.path是否以item为开头（考虑多级路由的请求）
       return to.path.startsWith(item)
    })
/* 
to:要去的路由对象，
from：来源的路由对象，
next：决定下一步的操作
  -next():直接放行，去往to的路由地址
   -next('/login'):不再去往to规定的地址 直接去next指定的地址
*/

const token = store.state.user.token
const nickName = store.state.user.nickName

// 判断用户名是否存在
if(nickName) {
    return next()
}

// 判断跳转的地方是否需要token 再进行下步操作
if(isCheckPath){
    // 当前路径需要token校验
    // 首先判断是否有token 如果有token则获取用户名并放行，如果没有就去登录页登录
    if(token){
        // 获取用户名
        store.dispatch('user/getUserMsg')
        next();
    }else{
        next('/login')
    }
}else{
    // 当前路由不需要token校验(如果此时有token 可以顺便获取一下用户信息)
 
    if(token){
        try{
           await store.dispatch('user/getUserMsg');
           next()
        }catch(e){
            next('/login')
        }
    }
   
   next();
}
 


})

export default router;